<template>
	<view class="" >
		<view class="" >
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				indicator-active-color="#fff" class="swiper1 " >
				<swiper-item>
					<view class="swiper-item">
					<image :src="defImg" class="" style="height: 700upx;width: 100%;"></image>
					</view>
				</swiper-item>
				<swiper-item v-for="(item, index) in goodsImage" :key="index">	
					<view class="swiper-item">
						<image :src="item" class="" style="height: 700upx;width: 100%;"></image>
					</view>
				</swiper-item>
			</swiper>
		
		</view>
		<view class=" jui_pad_2432 jui_bg_fff">
			<view class=""style="display: flex;">
				<view class="jui_fc_fuse fc30 jui_font_w600">￥{{rmb || 0}}</view>
				<view class=" fc30 jui_font_w500 goods-money" style="display: flex; align-items: center;">
					<view class="icon-money">￥</view><view>{{szhb || 0}}</view>
				</view>
				<!-- <text class="jui_mar_l20 jui_fc_999 jui_fs32 " style="text-decoration: line-through;">￥{{goodsDetails.money || 0}}</text> -->
			</view>
			<view class="jui_flex jui_flex_justify_between jui_flex_items_center">
				<view class="">
					<text class="jui_fc_fuse jui_fs24 jui_bor_rad_5 jui_pad_l5 jui_pad_r5 jui_mar_r16"
						style="background-color: #ffe1e1; visibility: hidden;"></text>
				</view>
				<view class="jui_fs24 jui_fc_666">已售 {{sales || 0}} 件</view>
			</view>
			<view class="jui_ellipsis_2 jui_fs30 jui_mar_t14 jui_font_w600">{{goodsDetails.name}}</view>

		</view>
		<!-- 		<view class=" jui_pad_2432 jui_mar_t12 jui_bg_fff">
			<view class=" jui_fs30 jui_mar_t14 jui_font_w500 jui_flex jui_flex_justify_between">
				<view class="">{{goodsDetails.shop_name}}</view>
				<view class="">{{goodsDetails.shop_mobile}}</view>
			</view>
			<view class=" jui_fs30 jui_mar_t14 jui_font_w500 jui_flex jui_flex_justify_between">
				<view class="">{{goodsDetails.shop_site}}</view>
			</view>
		</view> -->

		<view class="jui_h20"></view>
		<view class="jui_bg_fff jui_pad_t20 ">
			<view class="jui_flex jui_flex_justify_between jui_flex_items_start jui_bor_bottom"
				style="padding: 10rpx 0; display: none;">
				<!-- <view class="jui_fs28 text-right " style="width: 18%;font-weight: 500;">选择</view> -->
				<!-- <view class="jui_fs28 jui_flex jui_flex_items_center   jui_pad_b20"
					style="width: 100%;">
						<view v-for="(item,index) in tagList" :key="index" style="margin:0 4rpx;width:20%;">
							<view class="tage-title" :style="{background: item.color, color:'#fff'}">{{item.name}}</view>
						</view>
				</view> -->
			</view>
			<view class="jui_flex jui_flex_justify_between jui_flex_items_start  jui_bor_bottom "
				style="margin-left: 30upx;padding: 30rpx 0;">
				<view class="jui_fs28 text-right " style="width: 18%;font-weight: 500;">购买须知</view>
				<view
					class="jui_fs28 jui_flex jui_flex_items_center jui_flex_justify_between   jui_mar_r20 jui_ellipsis_2"
					style="width: 75%;">
					{{msg}}
				</view>
			</view>
		</view>
		<view v-if="goodsDetails.shop_name ||goodsDetails.shop_mobile||goodsDetails.shop_site"
			class="jui_pad_2432 jui_mar_t20  jui_bg_fff">
			<view v-if="goodsDetails.shop_name" class="">{{goodsDetails.shop_name}}</view>
			<view v-if="goodsDetails.shop_mobile" class="">商家电话：<text
					class="color-blue">{{goodsDetails.shop_mobile}}</text></view>
			<view v-if="goodsDetails.shop_site" class="">商家地址：{{goodsDetails.shop_site}}</view>
		</view>
		<view class="jui_h20"></view>
		<view class="jui_h20"></view>
		<view class="jui_pad_2432 jui_bg_fff">
			<view class="jui_flex jui_flex_items_center">
				<view class="line"></view>
				<view class="jui_fc_333 jui_fs32 jui_mar_l20">商品详情</view>
			</view>
			<view class="jui_mar_t20 jui_pad_t20" id="abc" style="width: 95%;margin: 0 auto;">
				<!-- <jyf-parser :html="goodsDetails.content" ref="article"></jyf-parser> -->
				<jyf-parser :html="contentList" ref="article"></jyf-parser>

			</view>
		</view>
		<view class="jui_h100"></view>
		<view class="jui_footer jui_pad_t20 jui_pad_b20">
			<view class="jui_flex jui_flex_justify_between jui_flex_items_center" style="width: 90%;margin: 0 auto;">
				<view class="cart  jui_bor_rad_40  jui_fs28 jui_fc_fff" @tap="show">加入购物车</view>
				<view class="buy  jui_bor_rad_40  jui_fs28 jui_fc_fff" @tap="show">立即购买</view>
			</view>
		</view>
		<popup-layer ref="popupRef" :direction="'top'">
			<view class="jui_bg_fff jui_pad_2432" style="border-radius: 29upx 29upx 0 0;">
				<view class="jui_flex jui_flex_justify_between ">
					<image :src="defImg" mode="" style="width: 160upx;height: 160upx;"
						class="jui_bor_rad_5 jui_bg_f7f"></image>
					<view class="jui_flex1 jui_mar_l20">
						<!-- <view class="jui_flex jui_flex_items_end">
							<view>
								<text class="jui_fc_fuse jui_fs34">￥{{money || 0 }}</text>
								<text class=" fc30 jui_font_w500 goods-money">￥{{hyMoney || 0}}</text>
							</view>
						</view> -->
						<view class=""style="display: flex;">
							<view class="jui_fc_fuse fc30 jui_font_w600">￥{{rmb || 0}}</view>
							<view class=" fc30 jui_font_w500 goods-money" style="display: flex; align-items: center;">
								<view class="icon-money">￥</view><view>{{szhb || 0}}</view>
							</view>
							<!-- <text class="jui_mar_l20 jui_fc_999 jui_fs32 " style="text-decoration: line-through;">￥{{goodsDetails.money || 0}}</text> -->
						</view>
						<view class="jui_flex jui_flex_items_end jui_mar_t20">
							<view class="jui_mar_t20 jui_pad_t20">
								<text class="jui_fc_666 jui_fs28">库存：{{kuCun || 0 }}</text>
							</view>
						</view>

					</view>
				</view>
				<view class="jui_h20"></view>
				<view class="jui_clearfix jui_pad_1216">
					<view style="float: left;" v-for="(item, index) in goodsDetails.shops_format" :key="index"
						@tap="sel(item, index)">
						<view class="jui_mar_t16 jui_mar_r16 jui_pad_l5 jui_pad_r5 jui_fs30 jui_fc_333"
							:class="{selActive: selIndex == index}">{{ item.name }}</view>
						<!-- <view class="gw_guige_list_bar jui_flex jui_flex_wrap ">
							<label
								class="gw_guige_list_con "
								v-for="(row, i) in item.spec_values"
								:key="i"
								:class="{ gw_guige_checked: sel[index] == i }"
								@click="chooseCol(row, index, i)"
							>
								<input type="radio" name="color" value="1" checked="checked" />
								<view class="jui_pad_l5 jui_pad_r5 jui_fs29">{{ row.spec_value }}</view>
							</label>
						</view> -->
					</view>
				</view>
				<view class="jui_pad_1216">
					<view class="jui_flex jui_mar_t20 jui_flex_justify_between" style="">
						<text class="jui_fs28  jui_fc_333" style="">数量</text>
						<view class="jui_flex jui_flex_items_center jui_flex_justify_between">
							<image src="../../../static/imgs/home/-.png" mode="" style="width: 24upx;height: 24upx;"
								@tap="jia(-1)"></image>
							<input type="text" placeholder="1" :value="num" disabled="true"
								style="width: 80upx;font-size: 24rpx;"
								class="jui_text_center jui_bg_f7f jui_mar_l16 jui_mar_r16" />
							<image src="../../../static/imgs/home/+.png" mode="" style="width: 24upx;height: 24upx;"
								@tap="jia(1)"></image>
						</view>
					</view>
				</view>
				<view class="jui_h60"></view>
				<view class="jui_h100"></view>
				<view class="jui_footer jui_pad_t20 jui_pad_b20">
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center"
						style="width: 90%;margin: 0 auto;">
						<view class="cart  jui_bor_rad_40  jui_fs28 jui_fc_fff" v-if="money == rmb &&  hyMoney == szhb" @tap="addCart()">加入购物车</view>
						<view class="buy  jui_bor_rad_40  jui_fs28 jui_fc_fff" v-if="money == rmb && hyMoney== szhb" @tap="buy()">立即购买</view>
					</view>
				</view>
			</view>
		</popup-layer>
		<uni-popup ref="popup" type="share">
			<view class="social-share share-component jui_bg_fff jui_pad_t20" style="height: 300upx;"></view>
		</uni-popup>
	</view>
</template>

<script>
	import jyfParser from '@/components/jyf-parser/jyf-parser';
	import popupLayer from '@/components/popup-layer/popup-layer.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	export default {
		components: {
			jyfParser,
			popupLayer,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		data() {
			return {
				categoryId: '',
				goodsId: '',
				goodsDetails: '',
				onlyPhoto: '',
				hyMoney: '',
				money:'',
				num: 1,
				selIndex: 0,
				selInfo: {},
				contentList: '',
				goodsImage: [],
				sales: '',
				kuCun: '',
				msg: '',
				tagList: [],
				defImg:'',
				rmb:'',
				szhb:'',
			};
		},
		onLoad(opt) {
			this.categoryId = opt.categoryId;
			this.goodsId = opt.id;
			this.defImg = opt.img
			this.rmb = opt.hbzj
			this.szhb = opt.hbzjsz
			this.init();
		},
		methods: {
			init() {
				let userId = uni.getStorageSync('uid');
				let _token = uni.getStorageSync('token');
				this.$api.tageList({
					goodsId: this.goodsId,
					_token: _token
				}).then(res => {
					this.tagList = res.data
				});
				this.$api.getShopDetails({
					goodsId: this.goodsId,
					_token: _token
				}).then(res => {
					if (res.ok&&res.data) {
						const regex = new RegExp('img', 'gi');
						let goodsImage = res.data.attachs&& res.data.attachs.length>1?res.data.attachs.split(','):res.data.attachs
						let arry = goodsImage.filter(item=> item !==this.defImg )
						this.goodsImage = arry
						this.money = res.data.ismember ? res.data.memberPrice : res.data.marketPrice
						this.hyMoney = res.data.ismember ? res.data.ydysmemberPrice : res.data.ydysmarketPrice
						this.sales = res.data.sales
						this.msg = res.data.needknow
						this.onlyPhoto = this.goodsImage[0]
						this.contentList = res.data.content
						this.kuCun = res.data.number 
					}
				});
			},
			sel(item, index) {
				this.selIndex = index;
				this.selInfo = this.goodsDetails.shops_format[index];
			},
			addCart() {
				let id = this.goodsId
				let userId = uni.getStorageSync('uid');
				let _token = uni.getStorageSync('token');
				let parmas = {
					goodsId: id,
					userId: userId,
					number: this.num,
					_token: _token,
					money: this.money
				}
				this.$api.addShopCar(parmas).then(res => {
					if (res.ok) {
						this.$msg(res.msg);
						this.$refs.popupRef.close();
					}
				});
			},
			jia(num) {
				if (num > 0) {
					this.num += num;
				} else {
					if (this.num > 1) {
						this.num += num;
					}
				}
			},
			buy() {
				var arr = [];
				let json = {
					id: this.selInfo.id,
					name: this.goodsDetails.name,
					format_name: this.selInfo.name,
					money: this.selInfo.money,
					num: this.num,
					img: this.selInfo.image,
					freight: this.selInfo.freight,
				};
				arr.push(json);
				uni.navigateTo({
					url: `/pages/home/goodsDetail/placeOrder?from=buy&shop_id=${this.goodsId}&categoryId=${this.categoryId}&num=${this.num}&photo=${this.defImg}`
				});
			},
			show() {
				this.$refs.popupRef.show();
			}
		}
	};
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont';
		src: url('//at.alicdn.com/t/font_1796157_616mg8112mu.eot');
		src: url('//at.alicdn.com/t/font_1796157_616mg8112mu.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1796157_616mg8112mu.woff2') format('woff2'),
			url('//at.alicdn.com/t/font_1796157_616mg8112mu.woff') format('woff'), url('//at.alicdn.com/t/font_1796157_616mg8112mu.ttf') format('truetype'),
			url('//at.alicdn.com/t/font_1796157_616mg8112mu.svg#iconfont') format('svg');
	}

	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */
	page {
		background-color: #f5f5f5;
	}

	.tage-title {
		width: 100%;
		text-align: center;
		border-radius: 22rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.goods-money {
		margin-left: 24rpx;
		font-weight: 500;
		color: #00c2ff;
	}
	.icon-money{
		width: 15px;
		    border: 1px solid;
		    border-radius: 100%;
		    height: 15px;
		    /* line-height: 12px; */
		    text-align: center;
		    font-size: 12px;
		    display: flex;
		    justify-content: center;
		    align-items: center;
	}

	.selActive {
		background-color: red !important;
		color: #fff !important;
		border-radius: 40rpx;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.cart {
		width: 310rpx;
		height: 80rpx;
		background: #f7b356;
		line-height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
	}

	.buy {
		width: 310rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #f75656;
		box-shadow: 0px 0px 20px 0px rgba(247, 86, 86, 0.6);
		border-radius: 40rpx;
		text-align: center;
	}

	.social {
		height: 140upx;
		width: 140upx;
		font-size: 28upx;
		text-align: center;
		line-height: 140upx;
		border-radius: 50%;
	}

	.swiper1 {
		/* position: absolute;
	 	top: 90upx;
	 	left: 4%; */
		width: 100%;
		height: 700upx;
		margin: 0 auto;
	}

	.gw_guige_bar {
		padding: 0.32rem;
	}

	.gw_guige_list_bar {
		padding: 0px;
		padding-top: 5px;
		margin-left: -0.16rem;
		margin-right: -0.16rem;
	}

	.gw_guige_list_con {
		color: #000;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		background: #f7f7f7;
		padding: 0.1rem 0.32rem;
		margin: 0.16rem;
		display: box;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		-moz-align-items: center;
		-ms-align-items: center;
		align-items: center;
	}

	.gw_guige_list_con input {
		display: none;
	}

	.gw_guige_list_con p {
		color: #000;
	}

	.gw_guige_checked {
		background: #ff4141;
		color: #fff;
	}

	.gw_guige_checked p {
		color: #fff;
	}

	.fc30 {
		font-size: 40rpx;
	}
</style>
